<template>
 
   <el-form :inline="true" :model="from" class="demo-form-inline">
   <el-form-item label="合同标题">
     <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
   </el-form-item>
   <el-form-item label="对方单位">
     <el-input v-model="from.unit" placeholder="对方单位" clearable />
   </el-form-item>
   <el-form-item label="对方负责人">
     <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
   </el-form-item>
   <el-form-item label="经办人">
     <el-input v-model="from.attn" placeholder="经办人" clearable />
   </el-form-item>
   <el-form-item label="签订日期">
       <el-date-picker
       v-model="from.dateofSigning"
       type="date"    value-format="YYYY-MM-DD"
       placeholder="签订日期"
       clearable
     />
   </el-form-item>
   <el-button size="small" type="primary" @click="show" >查询</el-button>
  <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
  <div>
    <el-radio-group v-model="radio" size="large">
      <el-radio-button label="全部" @change="show1()" />
      <el-radio-button label="待审批" @click="show2()"  />
      <el-radio-button label="已审批" @click="show3()"  />
    </el-radio-group>
  </div>
   </el-form>
   <el-table :data="tableData" style="width: 100%" >
       
   <el-table-column prop="contractNumber" label="合同编号" width="100" />
   <el-table-column prop="contractTitle" label="合同标题" width="100" />
   <el-table-column prop="unit" label="对方单位" width="100" />
   <el-table-column prop="personCharge" label="对方负责人" width="100" />
   <el-table-column prop="contractType" label="合同类别" width="100" />
<el-table-column prop="dateofSigning" label="签订日期" width="100" >
  <template #default="scope">
           {{ scope.row.dateofSigning.substring(0, 10)}}
  </template>
</el-table-column>
   <el-table-column prop="attn" label="经办人" width="100" />
   <el-table-column prop="createdDate" label="创建时间" width="100" >
     <template #default="scope">
       {{ scope.row.createdDate.substring(0, 10)}}
     </template>
   </el-table-column>
   <el-table-column prop="ccontractStatus" label="状态" width="100" >
       <template #default="scope">
         
           <el-tag type="success" v-if="scope.row.ccontractStatus == 2">待审批</el-tag>
           <el-tag type="success" v-if="scope.row.ccontractStatus == 3">已通过</el-tag>
           <el-tag type="success" v-if="scope.row.ccontractStatus == 4">已拒绝</el-tag>
         
       </template>
</el-table-column>
   <el-table-column prop="approver" label="审批人" width="100" />
   <el-table-column  label="操作" width="500" >
   <template #default="scope">
      <el-button size="small" type="primary" @click="look(scope.row.contractId)" >查看</el-button>
     <el-button 
  size="small" 
  type="primary" 
  :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4"
  @click="yes(scope.row.contractId)"
>
  同意
</el-button>
         <el-button 
  size="small" 
  type="danger" 
  :disabled="scope.row.ccontractStatus == 3 || scope.row.ccontractStatus == 4"
  @click="no(scope.row.contractId)"
>
  拒绝
</el-button>
 </template>
     </el-table-column>
</el-table>
 <el-pagination
     v-model:current-page="page.Pageindex"
     v-model:page-size="page.Pagesize"
     :page-sizes="[3, 6, 9, 11]"
      layout="total, sizes, prev, pager, next, jumper"
     :total="page.totalCount"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   />


</template>
  <script setup lang='ts'>
  import axios  from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
import { ref, reactive, onMounted, watch } from 'vue'; 
   import { useRouter } from 'vue-router';
const router=useRouter()
const radio = ref()//单选查询
    //查询条件
   const from=reactive({
           contractTitle:'',
           unit:'',
           personCharge:'',
           attn:'',
           dateofSigning:'',
           ccontractStatus:'',
           ContractClassification:1
})
//重置
const chong=()=>{
 from.contractTitle='',
 from.unit='',
 from.personCharge='',
 from.attn='',
 from.dateofSigning='',
    from.ccontractStatus = ''
 show()
  }
//通过
  const yes = (id:number) =>
{
  let data = {
     "approvalResult": "同意",
  "approvalNotes": "",
  "approver":localStorage.getItem('username'),
  "contractId": id,
  "subgrantor": ""
    }
    console.log(data)
    axios.post("/hwrite/api/Contract/CrerateAppro", data).then((res) => { 
      if (res.data.data>0) {
        ElMessage.success('已通过')
        show()
      }
      else {
  ElMessage.error('操作失败')
}
    })
}
//拒绝
  const no = (id: number) =>
  {

      let data = {
     "approvalResult": "拒绝",
  "approvalNotes": "",
  "approver":localStorage.getItem('username'),
  "contractId": id,
  "subgrantor": ""
    }
    console.log(data)
    axios.post("/hwrite/api/Contract/CrerateAppro", data).then((res) => { 
      if (res.data.data>0) {
        ElMessage.success('已拒绝')
        show()
      }
      else {
  ElMessage.error('操作失败')
}
    })
}
//分页
const page=reactive({
   Pageindex:1,
   Pagesize:3,
   totalCount:0,
   PageCount:0

})
const handleSizeChange = (val:any) => {
   page.Pagesize=val;
   show();
 }
 const handleCurrentChange = (val:any) => {
   page.Pageindex=val;
   show();
 } 
  //显示货主合同信息
     const tableData = ref([]);  
const show=()=>{
console.log(from.ContractClassification)
   axios.get('/hread/api/ContractRead/Show',
           {
               params: {
                   Pageindex:page.Pageindex,
                   Pagesize:page.Pagesize,
                   ContractTitle:from.contractTitle,
                   Unit:from.unit,
                   PersonCharge:from.personCharge,
                   Attn:from.attn,
                   DateofSigning:from.dateofSigning,
                   CcontractStatus:from.ccontractStatus,
                   ContractClassification:from.ContractClassification
  } 
      }
       )
       .then(res => {
    tableData.value = res.data.data.list;
    console.log(res.data.data.list)
     page.totalCount=res.data.data.totalCount;
        page.PageCount=res.data.data.pageCount;
       console.log(res.data.data)
         
       })

  }
//显示全部信息
  const show1 = () => {
   from.ccontractStatus="",
  show()
  }
//显示待审批
const show2=()=>{
 from.ccontractStatus="2",
  show()
     
  }
//显示已审批
const show3=()=>{
  from.ccontractStatus="3",
  show()
}
  //审批界面
  const formList = reactive({
    ccontractStatus: "",
})
const look=(ContractId:number)=>{
    axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: ContractId
        }
      }).then(res => {

      formList.ccontractStatus=res.data.data.ccontractStatus
      if (formList.ccontractStatus == 3 || formList.ccontractStatus == 4) { 
 router.push({
      path:'/HcontractLook',
      query:{ContractId:ContractId}

   })
  }
  else{
     router.push({
      path:'/HcontractAdd',
      query:{ContractId:ContractId}

   })
  }
      })


  
}
//钩子函数
   onMounted(() => {
      show()
       })

</script>
